<template>
	<div>
		<qiun-title-bar title="分类数据" />
		<view class="charts-box">
			<qiun-data-charts type="pie" :chartData="chartsDataPie1" />
		</view>
		<qiun-title-bar title="词云图" />
		<view class="charts-box">
			<qiun-data-charts  type="word" :chartData="chartsDataWords1"  />
		</view>
		
		<qiun-title-bar title="柱状图滚动条"/>
		<!-- 开启滚动条，需要开启拖动功能，即:ontouch="true" ，微信小程序需要开启canvas2d，否则会很卡，开启2d需要指定canvasId -->
		<view class="charts-box">
		  <qiun-data-charts type="column" canvasId="scrollcolumnid" :opts="{enableScroll:true,xAxis:{scrollShow:true,itemCount:4,disableGrid:true}}" :ontouch="true" :canvas2d="true" :chartData="chartsDataColumn"/>
		</view>
		
	</div>
</template>

<script>
	let page = 0;
	let size = 100;
	
	export default {
		data() {
			return {
				myCategories: [],
				myTags:[],
				myBlogs:[],
				chartsDataPie1: {
					"series": [{
						"data": []
					}]
				},
				chartsDataWords1:{
					"series": []
				},
				chartsDataColumn:{
					"categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
					"series": [{
						"name": "阅读数",
						"data": [35, 36, 31, 33, 13, 34]
					}, {
						"name": "评论数",
						"data": [18, 27, 21, 24, 6, 28]
					}]
				},opts: {
					color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: undefined,
					enableScroll: false,
					extra: {
						word: {
							type: "normal",
							autoColors: false
						}
					}
				}

			}
		},
		onLoad() {
			this.getMyCategories();
			this.getMyTags();
			this.getMyBlogs();
		},
		onPullDownRefresh() {
			this.getMyCategories();
			this.getMyTags();
			this.getMyBlogs();
			uni.stopPullDownRefresh()
		},
		methods: {
			getMyCategories() {
				this.myCategories = [];
				this.$request.get(this.$params.host + this.$params.action_category_get, res => {
					let url = this.$params.host + this.$params.action_blogs_get_tags_count;
					res.data.forEach(async (c) => {
						let r = await this.$request.requestAsync(url + c.id)
						if (r.data.success && r.data.data!=0) {
							let category = {
								"name": c.name,
								"value": r.data.data
							}
							let word ={
								"name": c.name,
								"textSize": r.data.data+20
							}
							this.myCategories.push(category);
						}
					})
				}, () => {});
				this.chartsDataPie1.series[0].data = this.myCategories
			},
			getMyTags(){
				this.myTags = [];
				let url = this.$params.host + this.$params.action_tag_get
				this.$request.get(url,res => {
					
					res.data.forEach(async (t) => {
						let r = await this.$request.requestAsync(url + t.id + "/blogs")
						if(r.data.success && r.data.data.length>0){
							if(r.data.data.length>=30){
								r.data.data.length %= 30;
							}
							let tag = {
								name: t.name,
								textSize: r.data.data.length+10
							}
							this.myTags.push(tag);
						}
					})
				},() => {})
				
				this.chartsDataWords1.series = this.myTags;
				// console.log(this.myTags);
				console.log(this.chartsDataWords1);
			},
			getMyBlogs(){
				this.myBlogs = [];
				let header = {
					"content-type": this.$params.content_type,
					"page": page,
					"size": size
				}
				this.$request.getWithHeader(this.$params.host + this.$params.action_blogs_page, header, res => {
					let category = [];
					let readCount = [];
					let comments = [];
					res.data.forEach(blog => {
						
						category.push(this.$util.ellipsis(blog.title,8));
						comments.push(blog.comments.length);
						readCount.push(blog.readCount);
					});
					console.log(res);
					this.chartsDataColumn.categories = category;
					this.chartsDataColumn.series[0].data = readCount;
					this.chartsDataColumn.series[1].data = comments;
				}, () => {});
				
				
			}
			
			
			
		}

	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>